"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { FlexDiv } from ".";
import { TextData } from "../api/text/route";

export default function Home() {
    const inputRef = useRef<HTMLInputElement>(null);
    const [list, setList] = useState<TextData[]>([]);

    useEffect(() => {
        fetchText();
    }, []);

    const uploadText = () => {
        if (inputRef.current) {
            const text = inputRef.current.value;
            console.log(text);
            fetch("/api/text", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ message: text }),
            })
                .then(res => res.json())
                .then(data => {
                    setList(prev => [data,...prev]);
                    inputRef.current && (inputRef.current.value = "");
                })
                .catch(err => console.log(err));
        }
    };

    const clearText = () => {
        fetch("/api/text", {
            method: "DELETE",
            headers: {
                "Content-Type": "application/json",
            },
        })
            .then(res => res.json())
            .then(data => {
                console.log(data);
                setList([]);
            })
            .catch(err => console.log(err));
    };

    const fetchText = () => {
        fetch("/api/text", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            },
        })
            .then(res => res.json())
            .then(data => {
                console.log(data);
                setList(data.list);
            })
            .catch(err => console.log(err));
    };

    const copyText = (text: string) => () => {
        navigator.clipboard.writeText(text);
    };

    return (
        <Container>
            <Row>
                <Input
                    ref={inputRef}
                    type='text'
                />
                <FlexDiv
                    dir='row'
                    wrap='nowrap'>
                    <HandDrawn
                        onClick={uploadText}
                        src='/images/上传 2.png'
                        alt='upload'
                        width={80}
                        height={56}
                        object-fit='scale-down'
                    />
                    <HandDrawn
                        onClick={fetchText}
                        src='/images/refresh 2.png'
                        alt='refresh'
                        width={80}
                        height={56}
                        object-fit='cover'
                    />
                    <HandDrawn
                        onClick={clearText}
                        src='/images/清空 2.png'
                        alt='clear'
                        width={80}
                        height={56}
                        object-fit='cover'
                    />
                </FlexDiv>
            </Row>
            <List>
                {list.map(item => (
                    <div key={item._id}>
                        <code style={{ color: "#cccccc" }}>
                            {new Date(+(parseInt(item._id.substring(0, 8), 16) + "000"))
                                .toLocaleString()
                                .match(/(.*)\:/)![1] + "  "}
                        </code>
                        {item.message}
                        <span onClick={copyText(item.message)}>Copy</span>
                    </div>
                ))}
            </List>
        </Container>
    );
}

const HandDrawn = styled(Image)`
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 5px;
    padding: 0.5vh 0.5vw;
    width: 100%;
    height: 100%;
    max-width: 80px;
    max-height: 56px;
    border: 1px dashed #fff;

    &:hover {
        border: 1px dashed #ccc;
    }

    &:active {
        border: 1px solid #ccc;
    }
`;

const Input = styled.input.attrs({ placeholder: "⬆" })`
    padding: 1vh 1vw;
    border: none;
    background-color: #eee;
    border-radius: 6px;
    font-size: 1rem;
    flex: 1;
    display: flex;
    width: 20vw;
    margin-right: 2px;
`;

const List = styled.div`
    overflow: hidden scroll;
    padding: 0.5vh 1vw 5vh 0.5vw;
    width: 40vw;
    max-height: 50vh;
    overflow-y: scroll;
    // 滚动条美化

    &::-webkit-scrollbar-thumb {
        background: #5d00ff;
        border-radius: 100%;
    }
    &::-webkit-scrollbar {
        width: 4px;
        border-radius: 50%;
        /* background-color: #ffffff; */
    }

    & > div {
        margin: 0.5vh 0;
        width: 100%;
        flex: 1;
        position: relative;
        //文字超长时省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-right: 15%;

        span {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #ccc;
            cursor: pointer;
            padding: 2px;
            font-size: 0.8rem;
            box-sizing: border-box;
            color: #fff;
            border-radius: 2px;
        }
    }
`;

const Row = styled.div`
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    height: 5vh;
    width: 40vw;

    @media screen and (max-width: 600px) {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        width: 90vw;
        height: auto;
        height: 100px;
        ${Input} {
            width: 90%;
            margin-right: 5%;
            margin-bottom: 3px;
        }
    }
`;

const Container = styled.div`
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2vh 1vw;
    max-height: 80vh;
    @media screen and (max-width: 600px) {
        ${List} {
            width: 80vw;
        }
    }
`;
